<template>
  <div id="app">
    <el-container style="height: 100vh; margin: 0;">
      <el-aside width="200px">
        <div class="menu-header">药品商店</div>
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
          <el-menu-item index="1">药品列表</el-menu-item>
          <el-menu-item index="2">购物车</el-menu-item>
          <el-menu-item index="3">订单</el-menu-item>
          <el-menu-item index="4">用户</el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 路由视图 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1', // 默认激活药品列表
    };
  },
  methods: {
    handleSelect(key) {
      console.log(`选中菜单项: ${key}`);
      this.activeIndex = key; // 更新活跃索引
      // 根据选择的菜单项进行路由跳转
      switch (key) {
        case '1':
          this.$router.push('/');
          break;
        case '2':
          this.$router.push('/cart');
          break;
        case '3':
          this.$router.push('/order');
          break;
        case '4':
          this.$router.push('/user');
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style>
body, html, #app, .el-container {
  height: 100%;
  margin: 0;
  padding: 0;
}

.el-aside {
  background-color: #ffffff; /* 深蓝灰色，略亮于之前的颜色 */
  color: white;
}

.menu-header {
  padding: 20px;
  font-size: 20px;
  text-align: center;
  color: white;
  background-color: #1e2a35; /* 深海军蓝，更深的对比色 */
}

.el-menu {
  background-color: #2b3e50; /* 菜单背景色与侧边栏保持一致 */
}

.el-menu-item {
  color: #d1d5db; /* 柔和的灰白色，减少对比度 */
}

.el-menu-item:focus, .el-menu-item:hover {
  background-color: #1e2a35; /* 鼠标悬停时使用更深的背景色 */
  color: #1e7dd2; /* 鼠标悬停时的文字颜色为纯白，增加可读性 */
}

.el-menu-item.is-active {
  background-color: #1e2a35; /* 活跃状态的背景色也采用深海军蓝 */
  color: #ffffff; /* 活跃状态的文字颜色为纯白 */
}
</style>



